<template>
	<!-- 带返回箭头,搜素框,点击跳转 -->
	<view class="content">
		<view class="header">
			<!-- 状态栏 -->
			<view :style="{ height: statusBarHeight + 'px'}" class="stat"></view>

			<!-- 标题栏 -->
			<view class="title" :style="{ height: navigationBarHeight + 'px'}">
				
				<view @click="onback" class="back">
					<view v-if="show" class="t-icon iconfont icon-zuojiantou"></view>
				</view>

				<view class="title_search">
					<view class="destination">
						<uv-input :placeholder="name" border="none" v-model="searchValue" @confirm="search"></uv-input>
					</view>
					<view class="btn" @click="search">
						搜索
					</view>
				</view>
				<!-- 占位框,小程序胶囊 -->
				<!-- #ifdef MP-WEIXIN  -->
				<view style="width: 200rpx;"></view>
				<!-- #endif -->
			</view>

		</view>

		<!-- 空白占位 -->
		<view :style="{ height: statusBarHeight + navigationBarHeight + 'px'}"></view>

	</view>

</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: '请输入内容'
			},
			show: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navigationBarHeight: 0,
				searchValue: "",
			}
		},
		mounted() {
			// #ifndef MP-BAIDU
			this.statusBarHeight = getApp().globalData.statusBarHeight
			this.navigationBarHeight = getApp().globalData.navigationBarHeight
			// #endif
			// 百度小程序调用百度api获取状态栏高度
			// #ifdef MP-BAIDU
			this.statusBarHeight = swan.getSystemInfoSync().statusBarHeight
			this.navigationBarHeight = swan.getSystemInfoSync().navigationBarHeight
			// #endif

		},
		methods: {
			onback() {
				const pages = getCurrentPages()
				// 有可返回的页面则直接返回，uni.navigateBack  默认返回失败之后会自动刷新页面 ，无法继续返回
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				return;
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			search(){
				if(this.searchValue.length > 0){
				// 跳转至搜索页面
					// this.navTo(`/pages/SearchPage/SearchPage?value=${this.searchValue}`)
				}
			}
		},
	}
</script>
<style lang="scss">

	.header {
		position: fixed;
		z-index: 9999;
		background: #fff;
		//background: linear-gradient(281deg, #16A37D 0%, #35BC98 100%);
	}


	.stat {
		height: var(--status-bar-height); // --status-bar-height系统状态栏高度
		width: 100%;
	}

	

	.title {
		width: 750rpx;
		// height: 100rpx;

		padding: 16rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;

	}

	.back {
		padding-left: 20rpx;

		.t-icon {
			font-size: 50rpx;
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-weight: bold;
			color: #555;
		}
	}

	.title_search {
		margin-left: 20rpx;
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		background: #f0f0f0;
		border-radius: 86rpx 86rpx 86rpx 86rpx;
		


		.destination {

			float: left;
			font-size: 26rpx;
			padding-left: 30rpx;
			line-height: 120rpx;
			color: #999999;
		}

		.btn {
			float: right;
			width: 110rpx;
			height: 52rpx;
			text-align: center;
			line-height: 52rpx;
			margin-top: 4rpx;
			margin-right: 6rpx;
			background: linear-gradient(270deg, #19A47E 0%, #76CDAA 100%);
			border-radius: 116rpx 116rpx 116rpx 116rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

	}
</style>